<template>
  <div class="ResumeDelivery">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>求职管理</el-breadcrumb-item>
      <el-breadcrumb-item>简历投递</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图·-->
    <el-card class="box-card">
      <div class="classify">
        <div v-for="(item,index) in itemClassify" :key="index" class="classify-item">
          <span>{{item.theme}}</span>
          <el-tag v-for="(subItem,subIndex) in item.items" :key="subIndex" size="small" @click="selectItem(subItem)">{{subItem.name}}</el-tag>
        </div>
        <div class="classify-item">
          <span>当前选择:</span>
          <span v-for="(item,index) in itemClassify" :key="index">
            <span v-for="(subItem,subIndex) in item.items" :key="subIndex">
              <el-tag size="small" v-if="subItem.isChoose" closable @close="deleteItem(subItem)">{{subItem.name}}</el-tag>
            </span>
          </span>
        </div>
        <hr>
      </div>
      <!-- 信息-卡片 -->
      <div class="info">
        <div class="info-content" :style="contentStyle">
          <el-card v-for="(item, index) in searchInfo" :key="index" body-style="background:rgba(70,107,152,0.3)">
            <div @click="showLookDialog(item)">
              <div class="info-row">
                <div class="card-title">{{item.deliveryPositionName}}</div>
                <div>
                  <el-tag effect="plain" size="small" type="info" v-if="item.deliveryStatusId == 1">{{item.deliveryStatus}}</el-tag>
                  <el-tag effect="plain" size="small" type="primary" v-else-if="item.deliveryStatusId == 2">{{item.deliveryStatus}}</el-tag>
                  <el-tag effect="plain" size="small" type="warning" v-else-if="item.deliveryStatusId == 3">{{item.deliveryStatus}}</el-tag>
                  <el-tag effect="plain" size="small" type="success" v-else-if="item.deliveryStatusId == 4">{{item.deliveryStatus}}</el-tag>
                  <el-tag effect="plain" size="small" type="danger" v-else-if="item.deliveryStatusId == 5">{{item.deliveryStatus}}</el-tag>
                </div>
              </div>
              <div class="info-row">
                <div><span class="el-icon-office-building"></span>{{item.deliveryAddress}}</div>
                <div class="el-card-time">{{item.deliveryTime}}</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div class="info-footer" v-if="!isShowPicture">
        <el-pagination layout="prev, pager, next" :total="queryInfo.recordSum"></el-pagination>
      </div>
    </el-card>
    <!-- 简历详细信息 -->
    <el-dialog :visible.sync="lookDialog" width="700px" class="lookDialogStyle">
      <div class="lookDialogStyleOne">
        <div>{{currentPosition.deliveryPositionName}}</div>
        <div>
          <span><i class="el-icon-office-building"></i>&nbsp;<span>{{currentPosition.deliveryAddress}}</span>&nbsp;·&nbsp;<span>{{currentPosition.deliveryRequset}}</span></span>
          <span><span>小明</span>&nbsp;·&nbsp;<span>科技副总裁</span>&nbsp;<span>15-20K</span></span>
        </div>
        <div>
          <el-tag v-for="(subItem, subIndex) in currentPosition.deliveryDetail" :key="subIndex" effect="plain" type="primary" size="small">{{subItem}}</el-tag>
        </div>
      </div>
      <div class="lookDialogStyleTwo">
        <div :style="'height:' + 80*currentPosition.deliveryStatusId + 'px'">
          <el-steps direction="vertical" :active="currentPosition.deliveryStatusId" finish-status="success">
            <el-step v-for="subIndex in currentPosition.deliveryStatusId" :key="subIndex" :description="currentPosition.deliveryTime + ' 简历投递'"></el-step>
          </el-steps>
        </div>
        <div>
          <el-collapse v-model="activeId" accordion>
            <el-collapse-item title="公司基本信息" name="1">
              <div><i class="el-icon-school"></i>中信建投证券</div>
              <div><i class="el-icon-finished"></i>已上市</div>
              <div><i class="el-icon-user"></i>10000人以上</div>
              <div><i class="el-icon-connection"></i>互联网金融</div>
              <div><i class="el-icon-thumb"></i>https://www.csc108.com</div>
            </el-collapse-item>
            <el-collapse-item title="职位描述" name="2">
              <div><span>岗位：</span>智慧投行系统开发岗（2人）</div>
              <div><span>工作内容：</span>负责公司智慧投行系统研发工作；参与系统框架设计，性能持续优化。</div>
              <div><span>任职要求：</span>全日制计算机技术与应用或相关工科类专业重点大学（985/211）硕士研究生及以上学历;精通SpringBoot、SpringCloud、Mybatis等主流的开发框架，熟悉WEB开发。</div>
              <div><span>工作地点：</span>西安市碑林区南大街56号中信建投证券西安研发中心。</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="lookDialog = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 查询条件
        queryInfo:{
          pageIndex:0,
          pageSize:9,
          recordSum:0
        },
        itemClassify:[
          {theme:'投递状态:',items:[{name:'全部申请的职位',isChoose:false},{name:'已被查看的',isChoose:false},{name:'已被收藏的',isChoose:false},{name:'不合适的',isChoose:false}]},
          {theme:'投递时间:',items:[{name:'全部', isChoose:false},{name:'2021',isChoose:false},{name:'2020',isChoose:false},{name:'2019',isChoose:false}]}
        ],
        contentStyle:'max-height:' + document.documentElement.clientHeight/1.8 + 'px;' + 'max-width:' + document.documentElement.clientWidth/1.5,
        // 查询结果
        searchInfo:[
          {deliveryPositionName:'线上运营班主任',deliveryAddress:'西安市雁塔区',deliveryRequset:'在校/应届',deliveryDetail:['课程转化','课程顾问','线上教育'],deliveryStatusId:'1',deliveryStatus:'已投递',deliveryTime:'2021-01-01'},
          {deliveryPositionName:'在家语音客服',deliveryAddress:'西安市新城区',deliveryRequset:'经验不限',deliveryDetail:['在线客服','外向','开朗'],deliveryStatusId:'4',deliveryStatus:'可面试',deliveryTime:'2021-02-02'},
          {deliveryPositionName:'在线助教',deliveryAddress:'西安市雁塔区',deliveryRequset:'经验不限',deliveryDetail:['线上授课','全职','助教'],deliveryStatusId:'1',deliveryStatus:'已投递',deliveryTime:'2021-01-11'},
          {deliveryPositionName:'猿辅导',deliveryAddress:'西安市雁塔区',deliveryRequset:'在校/应届',deliveryDetail:['线上授课','助教'],deliveryStatusId:'4',deliveryStatus:'可面试',deliveryTime:'2021-01-11'},
          {deliveryPositionName:'猿辅导',deliveryAddress:'西安市雁塔区',deliveryRequset:'在校/应届',deliveryDetail:['线上授课','助教'],deliveryStatusId:'5',deliveryStatus:'不合适',deliveryTime:'2021-01-11'},
          {deliveryPositionName:'猿辅导',deliveryAddress:'西安市雁塔区',deliveryRequset:'在校/应届',deliveryDetail:['线上授课','助教'],deliveryStatusId:'4',deliveryStatus:'可面试',deliveryTime:'2021-01-11'},
          {deliveryPositionName:'猿辅导',deliveryAddress:'西安市雁塔区',deliveryRequset:'在校/应届',deliveryDetail:['线上授课','助教'],deliveryStatusId:'3',deliveryStatus:'已收藏',deliveryTime:'2021-01-11'},
          {deliveryPositionName:'猿辅导',deliveryAddress:'西安市雁塔区',deliveryRequset:'在校/应届',deliveryDetail:['线上授课','助教'],deliveryStatusId:'2',deliveryStatus:'已查看',deliveryTime:'2021-01-11'},
          {deliveryPositionName:'猿辅导',deliveryAddress:'西安市雁塔区',deliveryRequset:'在校/应届',deliveryDetail:['线上授课','助教'],deliveryStatusId:'4',deliveryStatus:'可面试',deliveryTime:'2021-01-11'}
        ],
        lookDialog: false,
        // 当前职位信息
        currentPosition:{},
        // 折叠面板下标
        activeId:'1'
      }
    },
    created() {
      this.$data.itemClassify[0].items[0].isChoose = true
      this.$data.queryInfo.recordSum = this.$data.searchInfo.length
    },
    methods:{
      // 信息展现方式的添加
      selectItem(subItem) {
        for (let i = 0; i < this.$data.itemClassify.length; i++) {
          for (let j = 0; j < this.$data.itemClassify[i].items.length; j++) {
            if(this.$data.itemClassify[i].items[j].name == subItem.name) {
              // 一层选择
              if (i == 0) {
                this.clearChooseOne()
              }
              // 二层选择
              if (i == 1) {
                this.clearChooseTwo()
              }
              this.$data.itemClassify[i].items[j].isChoose = true
            }
          }
        }
      },
      // 删除当前选项
      deleteItem(subItem){
        for (let i = 0; i < this.$data.itemClassify.length; i++) {
          for (let j = 0; j < this.$data.itemClassify[i].items.length; j++) {
            if(this.$data.itemClassify[i].items[j].name == subItem.name) {
              // 一层选择
              if (i == 0) {
                this.clearChooseOne()
              }
              // 二层选择
              if (i == 1) {
                this.clearChooseTwo()
              }
            }
          }
        }
        // 判断当前选择是否为空
        let flag = false
        for (let i = 0; i < this.$data.itemClassify.length; i++) {
          for (let j = 0; j < this.$data.itemClassify[i].items.length; j++) {
            if(this.$data.itemClassify[i].items[j].isChoose) {
              flag = true
            }
          }
        }
        if (!flag) {
          this.$data.itemClassify[0].items[0].isChoose = true
        }
      },
      // 清空所有一层选择
      clearChooseOne() {
        for (let i = 0; i < this.$data.itemClassify[0].items.length; i++) {
          this.$data.itemClassify[0].items[i].isChoose = false
        }
      },
      // 清空所有二层选择
      clearChooseTwo() {
        for (let i = 0; i < this.$data.itemClassify[1].items.length; i++) {
          this.$data.itemClassify[1].items[i].isChoose = false
        }
      },
      // 打开招聘信息详细界面
      showLookDialog(row) {
        this.$data.lookDialog = true
        this.$data.currentPosition = row
        this.$data.currentPosition.deliveryStatusId = parseInt(row.deliveryStatusId)
      }
    }
  }
</script>

<style lang="less" scoped>
  .classify{
    min-height: 110px;
    min-width: 600px;
    .classify-item{
      .el-tag{
          margin: 0 0 1em 1em;
      }
    }
  }
  .info{
    .info-content{
      display: flex;
      // flex-wrap: wrap;
      // flex: 3;
      flex-flow: row wrap;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      overflow: auto
    }
    .el-card:hover{
      cursor: pointer;
    }
    .el-card{
      max-height: 80px;
      max-width: 330px;
      min-width: 330px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      margin: 10px 17px;
      .info-row{
        width: 300px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 10px auto;
        color: black;
        .card-title{
          font-size: 20px;
        }
        .el-icon-office-building{
          font-size: 18px;
        }
      }
    }
    #chart{
      width:100%;
      height:330px;
    }
  }
  .info-footer{
    display: flex;
    justify-content: center;
  }
  .lookDialogStyle{
    .lookDialogStyleOne div{
      margin: 10px 0;
    }
    .lookDialogStyleOne div:nth-child(1){
      font-size: 30px;
      font-weight: bold;
    }
    .lookDialogStyleOne div:nth-child(2){
      width: 90%;
      display: flex;
      flex-direction: row;
      align-content: center;
      justify-content: space-between;
    }
    .lookDialogStyleOne div:nth-child(2) span:nth-child(2) span{
      font-weight: bold;
    }
    .lookDialogStyleOne div:nth-child(2) span:nth-child(2) span:nth-child(3){
      color: orange;
    }
    .lookDialogStyleOne div:nth-child(3){
      span{
        margin-right: 10px;
      }
      .el-tag{
        width: 70px;
        border-radius: 100px;
        text-align: center;
      }
    }
    .lookDialogStyleTwo{
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 300px;
    }
    .lookDialogStyleTwo div{
      width: 300px;
      .el-collapse-item{
        i{
          margin-right: 5px;
          color: grey;
          font-size: 15px;
        }
        span{
          font-weight: bold;
        }
      }
    }
  }
</style>